<template>
	<view class="index-box">
		<view class="data-list">
			<view class="comment-item mb-20" v-for="(item, index) in dataList" :key="index">
				<view class="ci-t flex-tb">
					<view class="ci-avatar">
						<image :src="item.headimgurl"></image>
					</view>
					<view class="ci-info flex-c">
						<view class="ci-name f-30">{{ item.nickname }}</view>
						<view class="ci-date c-99">{{ item.date_creation | formTime }}</view>
					</view>
					<view class="ci-rate">
						<u-rate :current="item.level" disabled size="32" active-color="#FF8B2E"></u-rate>
					</view>
				</view>
				<view class="ci-b f-26 mt-10">{{ item.content }}</view>
				<view class="ci-img">
					<!-- <view class="">
						11{{item.img}}11
					</view> -->
					<image class="ci-img-item" mode="aspectFill" v-for="(items,idx) in item.img" :src="items"
						@click="prewImg(idx, item.img)" :key="mindex"></image>
				</view>
			</view>
		</view>
		<sww-load-more :params="dataListParams"></sww-load-more>
	</view>
</template>
<script>
	import {
		pagingMixin
	} from '@/mixins/pagingMixin';
	import {
		formatDate
	} from '@/utils/moment/index.js';
	export default {
		mixins: [pagingMixin],
		data() {
			return {};
		},
		onLoad(options) {
			if (options.prodId) {
				this.product_id = Number(options.prodId);
				this.type = Number(options.id)
				this.$initPage();
			}
		},
		filters: {
			formTime(time) {
				return formatDate(time, 'YYYY-MM-DD HH:mm:ss');
			}
		},
		onPullDownRefresh() {
			this.$initPage();
		},
		onReachBottom() {
			this._load_data();
		},
		methods: {
			//初始化
			$initPage() {
				this._init_data(
					'GetProductComment', {
						product_id: this.product_id,
						type:this.type
					}, {
						callBack: this.$formatList
					}
				);
			},
			$formatList(list) {
				return list.map(item => {
					if(!item.img){
						item.img =[]
					}else{
						item.img = item.img .split(',');
					}
					return item;
				});
			},
			prewImg(current, urls) {
				uni.previewImage({
					current,
					urls
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.index-box {
		padding: 20rpx 30rpx;
	}

	.comment-item {
		margin-bottom: 36rpx;
	}

	.ci-avatar {
		width: 70rpx;
		height: 70rpx;
		margin-right: 20rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.ci-info {
		flex: 1;
		width: 100%;

		.ci-date {
			font-size: 24rpx;
			margin-top: 4rpx;
		}
	}

	.ci-b {
		width: 100%;
		padding-left: 90rpx;
		margin-top: 10rpx;
		font-size: 28rpx;
	}

	.ci-img {
		width: 100%;
		padding-left: 76rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 10rpx;

		.ci-img-item {
			width:180rpx;
			height:180rpx;
			margin-right: 30rpx;
			margin-bottom:20rpx;
			&:nth-of-type(3n){
				margin-right: 0;
				margin-bottom:20rpx;
			}
		}
	}
</style>
